<template>
	<a-modal :title="$t('Create') + $t('User')" v-model='create' @cancel='cancelhandle' width='40%' @ok='subnew'
		:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
		<a-spin size="large"
			style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
			tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		<a-form :form='form' class="modal">
			<a-form-item :label="$t('User') + $t('Name')" v-bind='formlayout' has-feedback>
				<a-input v-decorator="['name', {
					rules: [{ required: true, message: $t('Enter') + $t('User') + $t('Name') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
				}]" :placeholder="$t('Enter') + $t('User') + $t('Name')">
				</a-input>
			</a-form-item>
			<a-form-item :label="$t('Nickname')" v-bind='formlayout' has-feedback>
				<a-input v-decorator="['display_name', {
					rules: [{ required: true, message: $t('Enter') + $t('Nickname') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
				}]" :placeholder="$t('Enter') + $t('Nickname')">
				</a-input>
			</a-form-item>
			<a-form-item :label="$t('Email')" v-bind='formlayout' has-feedback>
				<a-auto-complete allowClear v-decorator="['email', {
					rules: [
						{ required: false, message: $t('Enter') + 'Email' },
						{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: $t('Enter_valid_email') }]
				}]" :dataSource="edata" style="width: 200px" @change="handleChange"
					:placeholder="$t('Enter') + 'Email'" />
				<!-- <a-auto-complete style="width: 200px" allowClear v-decorator="['email',{
                    	rules:[{required:true,message:'请输入email'}]
                	}]"  @search="handleSearch" placeholder="input here">
					<template slot="dataSource">
					<a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
					</template>
				</a-auto-complete> -->
			</a-form-item>
			<a-form-item :label="$t('Max-Buckets')" v-bind='formlayout' has-feedback>
				<!-- a-input-number -->
				<a-input v-decorator="['max_buckets', {
					rules: [
						{ required: true, message: $t('Enter') + $t('Max-Buckets') },
						{ pattern: /^(1|[1-9]\d{0,3})$/, message: $t('Please-en-1-9999') }
					]
				}]" :placeholder="$t('Enter') + $t('Max-Buckets')" style="width: 100%;" />
			</a-form-item>
			<a-form-item :label="$t('User') + $t('Status')" v-bind='formlayout' has-feedback>
				<a-checkbox @change="onChangeup" :checked="up" v-decorator="['suspended']"
					style="padding-right:2em">{{ $t('Whether-to-enable') }}</a-checkbox>
			</a-form-item>

			<a-form-item :label="'S3' + $t('Key')" v-bind='formlayout' has-feedback>
				<a-checkbox @change="onChangekey" :checked="auto">{{ $t('Automatically-key') }}</a-checkbox>
				<p v-if="auto == false">
					<a-form-item label='Access key' v-bind='formlayout2' has-feedback>
						<a-input v-decorator="['key', {
							rules: [{ required: true, message: $t('Enter') + $t('Access-key') },
							{ pattern: /^[A-Za-z][A-Za-z0-9]{5,63}$/, message: $t('Key_format') }]
						}]" :placeholder="$t('Enter') + $t('Access-key')">
						</a-input>
					</a-form-item>
					<a-form-item label='Secret key' v-bind='formlayout2' has-feedback>
						<a-input v-decorator="['crt', {
							rules: [{ required: true, message: $t('Enter') + $t('Secret-key') },
							{ pattern: /^[A-Za-z][A-Za-z0-9]{5,63}$/, message: $t('Key_format') }]
						}]" :placeholder="$t('Enter') + $t('Secret-key')">
						</a-input>
					</a-form-item>
				</p>
			</a-form-item>
			<!--用户配额-->
			<a-form-item :label="$t('User') + $t('Quota')" v-bind='formlayout' has-feedback>
				<a-checkbox @change="onChangeuser" :checked="activeuser">{{ $t('Active') }}</a-checkbox>
				<p v-if="activeuser == true">
					<a-checkbox @change="onChangeuser1" :checked="activeuser1">{{ $t('Set-max-space') }}</a-checkbox>
					<a-checkbox @change="onChangeuser2" :checked="activeuser2">{{ $t('Set-max-obj') }}</a-checkbox>
				</p>
				<a-row>
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;"
							v-if="activeuser1 == true && activeuser == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['user.size.value',{
			                    rules:[{required:true,message:$t('Enter')+$t('Max-space')}]
			                	}]" :placeholder="$t('E-g')+'512'">
			                </a-input-number> -->
							<a-input :min='1' style="width:100%" v-decorator="['user.size.value', {
								rules: [
									{ required: true, message: $t('Enter') + $t('Max-space') },
									{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt2') }
								]
							}]" :placeholder="$t('E-g') + '512'">
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback v-if="activeuser1 == true && activeuser == true">
							<a-select v-decorator="['user.size.unit', {
								rules: [{ required: true, message: $t('Choose') + $t('Unit') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
							}]" :placeholder="$t('Choose') + $t('Unit')">
								<a-select-option v-for='u in uint ' :key='u.val'>{{ u.label }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-form-item :label="$t('Max-obj')" has-feedback v-if="activeuser2 == true && activeuser == true">
					<!-- <a-input-number :min='1' style="width:100%" v-decorator="['user.objs',{
	                    rules:[{required:true,message:$t('Enter')+$t('Max-obj')}]
	                }]" :placeholder="$t('E-g')+'100'">
	                </a-input-number> -->
					<a-input style="width:100%" v-decorator="['user.objs', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Max-obj') },
							{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
						]
					}]" :placeholder="$t('E-g') + '100'">
					</a-input>
				</a-form-item>
			</a-form-item>
			<a-form-item :label="$t('Bucket') + $t('Quota')" v-bind='formlayout' has-feedback>
				<a-checkbox @change="onChangebuk" :checked="activebuk">{{ $t('Active') }}</a-checkbox>
				<p v-if="activebuk == true">
					<a-checkbox @change="onChangebuk1" :checked="activebuk1">{{ $t('Set-max-space') }}</a-checkbox>
					<a-checkbox @change="onChangebuk2" :checked="activebuk2">{{ $t('Set-max-obj') }}</a-checkbox>
				</p>
				<a-row>
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;"
							v-if="activebuk1 == true && activebuk == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['bucket.size.value',{
									rules:[{required:true,message:$t('Enter')+$t('Max-space')}]
								}]" :placeholder="$t('E-g')+'512'">
							</a-input-number> -->
							<a-input style="width:100%" v-decorator="['bucket.size.value', {
								rules: [{ required: true, message: $t('Enter') + $t('Max-space') },
								{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt2') }]
							}]" :placeholder="$t('E-g') + '512'">
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback v-if="activebuk1 == true && activebuk == true">
							<a-select v-decorator="['bucket.size.unit', {
								rules: [{ required: true, message: $t('Choose') + $t('Unit') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
							}]" :placeholder="$t('Choose') + $t('Unit')">
								<a-select-option v-for='u in uint ' :key='u.val'>{{ u.label }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-form-item :label="$t('Max-obj')" has-feedback v-if="activebuk2 == true && activebuk == true">
					<!-- <a-input-number :min='1' style="width:100%" v-decorator="['bucket.objs',{
	                    rules:[{required:true,message:$t('Enter')+$t('Max-obj')}]
	                }]" :placeholder="$t('E-g')+'100'">
	                </a-input-number> -->
					<a-input style="width:100%" v-decorator="['bucket.objs', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Max-obj') },
							{ pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
						]
					}]" :placeholder="$t('E-g') + '100'">
					</a-input>
				</a-form-item>

			</a-form-item>
			<!--存储区域-->
			<!-- <a-form-item :label="$t('Storage-area')" v-bind="formlayout">
                <a-radio-group @change="onChangearea" v-model="tab">
					<a-radio :value="1">{{$t('Default')}}</a-radio>
					<a-radio :value="2">{{$t('Customize')}}</a-radio>
				</a-radio-group>
                <div>
                	<a-select  v-if="tab==1" :disabled="tab==1" v-decorator="['placement',{
	                    rules:[{required:true,message:$t('Choose')+ $t('Storage-area')}],
						initialValue:tarname.id
	                }]"  :placeholder="$t('Choose')+ $t('Storage-area')">
						注释<a-select-option :value="item.id" v-for="item in $store.state.basebucket.zone">{{item.id}}</a-select-option>
                	</a-select>
                	<ul v-if="tab==1">
                		<li><span class="slist">{{$t('Area')}}ID:</span>{{tarname.id}}</li>
                		<li><span class="slist">{{$t('Data-pool')}}:</span>{{tarname.data_pool}}</li>
                		<li><span class="slist">{{$t('Index-pool')}}:</span>{{tarname.index_pool}}</li>
                		<li><span class="slist">{{$t('Extra-pool')}}:</span>{{tarname.data_extra_pool}}</li>
                		<li><span class="slist">{{$t('Compress')}}:</span>{{tarname.is_compression == true?$t('Yes'):$t('No')}}</li>
                	</ul>
					
					<a-select v-if="tab==2" v-decorator="['placement2',{
	                    rules:[{required:true,message:$t('Choose')+ $t('Storage-area')}],
						initialValue:tarname.id
	                }]"  :placeholder="$t('Choose')+ $t('Storage-area')">
						<a-select-option :value="item.id" v-for="(item,index) in $store.state.basebucket.zone" :key="index">{{item.id}}</a-select-option>
                	</a-select>
                </div>
            </a-form-item> -->
		</a-form>
	</a-modal>
</template>

<script>
import request from '@/request/request'

export default {
	props: ['cc', 'tarname'],
	data() {
		return {
			form: this.$form.createForm(this),
			formlayout: {
				labelCol: { span: 5 },
				wrapperCol: { span: 17 }
			},
			formlayout2: {
				labelCol: { span: 8 },
				wrapperCol: { span: 16 }
			},
			create: false,
			tab: 1,
			auto: false,
			up: false,
			activeuser: false,
			activeuser1: false,
			activeuser2: false,
			activebuk: false,
			activebuk1: false,
			activebuk2: false,
			edata: [],
			result: [],
			spinning: false,
			uint: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
		}
	},
	watch: {
		cc(val) {
			this.create = val
		}
	},
	methods: {
		onChangekey(e) {
			this.auto = !this.auto
		},
		onChangeup() {
			this.up = !this.up
		},
		onChangearea(e) {

		},
		onChangeuser(e) {
			this.activeuser = !this.activeuser
			if (!this.activeuser) {
				this.activeuser1 = false
				this.activeuser2 = false
			}
		},
		onChangeuser1(e) {
			this.activeuser1 = !this.activeuser1
		},
		onChangeuser2(e) {
			this.activeuser2 = !this.activeuser2
		},
		onChangebuk(e) {
			this.activebuk = !this.activebuk
			if (!this.activebuk) {
				this.activebuk1 = false
				this.activebuk2 = false
			}
		},
		onChangebuk1(e) {
			this.activebuk1 = !this.activebuk1
		},
		onChangebuk2(e) {
			this.activebuk2 = !this.activebuk2
		},
		cancelhandle(e) {
			this.form.resetFields();
			this.$emit('omodal', false, true)
			this.spinning = false
			// this.create=false
			this.activeuser = false
			this.activeuser1 = false
			this.activeuser2 = false
			this.activebuk = false
			this.activebuk1 = false
			this.activebuk2 = false
			this.auto = false
			this.up = false
			this.tab = 1
		},
		subnew(e) {
			e.preventDefault();
			this.form.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					// if(this.tab == 2){存储区域的功能
					// 	value.placement = value.placement2
					// }
					request('put', 'rgw/user', value).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.form.resetFields();
						this.$emit('omodal', false, false)
						this.spinning = false
						// this.create=false
						this.activeuser = false
						this.activeuser1 = false
						this.activeuser2 = false
						this.activebuk = false
						this.activebuk1 = false
						this.activebuk2 = false
						this.auto = false
						this.up = false
						this.tab = 1
						this.$store.commit('toUpdateUsers', true);
					}).catch(err => {
						this.form.resetFields();
						this.$emit('omodal', false, false);
						this.spinning = false;
						this.activeuser = false;
						this.activeuser1 = false;
						this.activeuser2 = false;
						this.activebuk = false;
						this.activebuk1 = false;
						this.activebuk2 = false;
						this.auto = false;
						this.up = false;
						this.tab = 1;
					})
				}
			})
		},
		handleChange(value) {
			this.edata = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@gmail.com`,
				`${value}@163.com`,
				`${value}@qq.com`,
			];
		}
		// handleSearch(value) {
		// 	let result;
		// 	if (!value || value.indexOf('@') >= 0) {
		// 	result = [];
		// 	} else {
		// 	result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
		// 	}
		// 	this.result = result;
		// },
	}
}
</script>

<style scoped>
.ant-select {
	width: 100% !important;
}

.modal {
	height: 600px;
	overflow-y: auto;
}
</style>
